import React from 'react';
import { Layout, Menu } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom'

import 'antd/dist/antd.css';
import './styleBox/index.scss';

import { PieChartTwoTone, SmileTwoTone, DatabaseTwoTone, MessageTwoTone } from '@ant-design/icons';
import { ControlOutlined, SendOutlined, SkinOutlined } from '@ant-design/icons';

const { Header, Content, Sider } = Layout;

// 左边菜单栏
const items2 = [
  { icon: PieChartTwoTone, label: "数据看板", key: "/admin/dashboard" },
  { icon: SmileTwoTone, label: "用户管理", key: "/admin/users" },
  {
    icon: DatabaseTwoTone, label: "首页管理", children: [
      {
        key: "/admin/channels",
        label: "官方活动",
        icon: <ControlOutlined />
      },
      {
        key: "/admin/goods",
        label: "赛事新闻",
        icon: <SendOutlined />
      },
      {
        key: "/admin/hotwords",
        label: "时装管理",
        icon: <SkinOutlined />
      },
    ]
  },
  { icon: MessageTwoTone, label: "帖子管理", key: "/admin/Messages" }
].map(({ key, icon, label, children }, index) => {
  return {
    key,
    icon: React.createElement(icon),
    label,
    children,
  };
});

let navigator;
const onCurrentKey = ({ key }) => {
  console.log("onCurrentKey key=", key);
  navigator(key)
}

// jsx
export default () => {
  navigator = useNavigate();
  const location = useLocation();

  return (
    <Layout>
      {/* <Header className="header" style={{background: "rgb(247, 182, 57)"}}> */}
      <Header className="header">
        <img src="/logo.png" className='App-logo' alt="logo" style={{ width: 40 }} />
        <text className='head_text'>—— 和平精英小程序后台管理 ——</text>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={['/admin/dashboard']}
            defaultOpenKeys={['/admin/dashboard']}
            style={{
              height: '100%',
              borderRight: 0,
            }}
            items={items2}
            onClick={onCurrentKey}
            selectedKeys={[location.pathname]}
          />
        </Sider>
        <Layout style={{ padding: '0 24px 24px', overflow: 'hidden' }} >
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              marginTop: 20,
              minHeight: 280,
              backgroundColor: '#fff',
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
};